<template>
	<view class="home-recommend component-diy">
		<view class="home-nomoral-title-box">
			<view class="home-nomoral-title">商家推荐</view>
			<view class="home-nomoral-more" @click='productList'>
				<text>查看更多</text>
				<uni-icons class="icons" type="arrowright" size="12" color="#999"></uni-icons>
			</view>
		</view>
		<view class="home-recommend-tips">各类精美商品随心选</view>
		<view class="home-recommend-scroll">
			<view class="home-recommend-list-box">
				<view class="home-recommend-list" v-for='(item, index) in recommendList' :key="item.goods_id" @click='details' :data-id='item.goods_id'>
					<view class="home-recommend-list-img">
						<view v-if='item.goods_num <= 0' class="goods-sell-empty">已售空</view>
						<image mode='aspectFit' lazy-load="true" :src='item.goods_image'></image>
					</view>
					<view class="home-nomoral-list-name home-recommend-padding">{{item.goods_name}}</view>
					<view v-if='item.promotion_status == 1' class="home-recommend-price">￥{{item.act_price}}</view>
					<block v-else>
						<view v-if='item.plus_mem_status == 1' class="home-recommend-price">￥{{item.plus_price}}</view>
						<view v-if='item.shop_mem_status == 1 && (user_type == 2&&item.plus_mem_status == 2 || user_type == 3)' class="home-recommend-price">￥{{item.shop_mem_price}}</view>
						<view v-else class="home-recommend-price">￥{{item.online_price}}</view>
					</block>
					<uni-icons class="home-recommend-list-btn" size="18" color="#ff3d3d" @click.native.stop @click="addToCar"
					 :data-index='index' type="plus-filled"></uni-icons>
				</view>
			</view>
			<!-- <view class='loading'>
				<block v-if='isLoading'>
					<image src='https://mall.xzthealth.com/loading2.gif' />
					<text>加载中</text>
				</block>
				<text v-else-if='canLoad'>下拉加载更多</text>
				<text v-else-if='!canLoad && (!recommendList || !recommendList.length)'>暂无推荐商品</text>
				<text v-else>已加载全部</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// canLoad: false,
				// isLoading: false,
				user_type: 1,
				recommendList: [{
						"id": "1121",
						"goods_id": "22751",
						"promotion_status": 0,
						"act_price": null,
						"goods_img_id": "1316",
						"goods_number": "34339",
						"goods_name": "\u7eff\u7bad",
						"online_price": "6.00",
						"vip_online_state": "0",
						"attribute_state": "1",
						"plus_mem_status": "1",
						"plus_price": "3.00",
						"shop_mem_status": "1",
						"shop_mem_price": "4.00",
						"goods_num": 873,
						"goods_image": "http:\/\/qny.zaiyuliya.com\/Store\/Goods\/15780224695e0eb645a7199.jpg",
						"maxBuyNum": 873
					},
					{
						"id": "1120",
						"goods_id": "22759",
						"promotion_status": 0,
						"act_price": null,
						"goods_img_id": "1365",
						"goods_number": "30276",
						"goods_name": "\u7b24\u5e1a",
						"online_price": "5.80",
						"vip_online_state": "0",
						"attribute_state": "1",
						"plus_mem_status": "1",
						"plus_price": "3.80",
						"shop_mem_status": "1",
						"shop_mem_price": "4.80",
						"goods_num": 998,
						"goods_image": "http:\/\/qny.zaiyuliya.com\/Store\/Goods\/15781268325e104df08f85f.jpg",
						"maxBuyNum": 998
					},
					{
						"id": "1119",
						"goods_id": "22755",
						"promotion_status": 0,
						"act_price": null,
						"goods_img_id": "1335",
						"goods_number": "30000",
						"goods_name": "\u529b\u58eb\u9999\u6c1b\u6c90\u6d74\u9732",
						"online_price": "75.00",
						"vip_online_state": "0",
						"attribute_state": "1",
						"plus_mem_status": "1",
						"plus_price": "72.00",
						"shop_mem_status": "1",
						"shop_mem_price": "73.00",
						"goods_num": 997,
						"goods_image": "http:\/\/qny.zaiyuliya.com\/Store\/Goods\/15780324665e0edd52d13f9.jpg",
						"maxBuyNum": 997
					},
					{
						"id": "1118",
						"goods_id": "22754",
						"promotion_status": 0,
						"act_price": null,
						"goods_img_id": "1329",
						"goods_number": "74801",
						"goods_name": "\u590f\u5a01\u5937\u679c",
						"online_price": "35.00",
						"vip_online_state": "0",
						"attribute_state": "1",
						"plus_mem_status": "1",
						"plus_price": "32.00",
						"shop_mem_status": "1",
						"shop_mem_price": "33.00",
						"goods_num": 947,
						"goods_image": "http:\/\/qny.zaiyuliya.com\/Store\/Goods\/15780235865e0ebaa2a4df7.jpg",
						"maxBuyNum": 947
					},
					{
						"id": "1115",
						"goods_id": "22802",
						"promotion_status": 0,
						"act_price": null,
						"goods_img_id": "1446",
						"goods_number": "80909",
						"goods_name": "\u4f50\u5927\u5e08\u8089\u9171",
						"online_price": "15.00",
						"vip_online_state": "0",
						"attribute_state": "1",
						"plus_mem_status": "1",
						"plus_price": "13.00",
						"shop_mem_status": "1",
						"shop_mem_price": "14.00",
						"goods_num": 820,
						"goods_image": "http:\/\/oem.ocean666.top\/Upload\/Store\/Goods\/2020-03-12\/5e69eaaa14acc2533.jpg",
						"maxBuyNum": 820
					},
					{
						"id": "1114",
						"goods_id": "22801",
						"promotion_status": 0,
						"act_price": null,
						"goods_img_id": "1442",
						"goods_number": "70060",
						"goods_name": "\u864e\u90a6\u8fa3\u9171",
						"online_price": "20.00",
						"vip_online_state": "0",
						"attribute_state": "1",
						"plus_mem_status": "1",
						"plus_price": "18.00",
						"shop_mem_status": "1",
						"shop_mem_price": "19.00",
						"goods_num": 727,
						"goods_image": "http:\/\/oem.ocean666.top\/Upload\/Store\/Goods\/2020-03-12\/5e69e950ab00f6703.jpg",
						"maxBuyNum": 727
					},
					{
						"id": "1108",
						"goods_id": "22757",
						"promotion_status": 0,
						"act_price": null,
						"goods_img_id": "1343",
						"goods_number": "32850",
						"goods_name": "\u83f2\u8bd7\u5c0f\u94fa\u6c90\u6d74\u9732",
						"online_price": "105.00",
						"vip_online_state": "0",
						"attribute_state": "1",
						"plus_mem_status": "1",
						"plus_price": "102.00",
						"shop_mem_status": "1",
						"shop_mem_price": "103.00",
						"goods_num": 932,
						"goods_image": "http:\/\/qny.zaiyuliya.com\/Store\/Goods\/15780328415e0edec92bbf8.jpg",
						"maxBuyNum": 932
					},
					{
						"id": "1107",
						"goods_id": "22758",
						"promotion_status": 0,
						"act_price": null,
						"goods_img_id": "1361",
						"goods_number": "88039",
						"goods_name": "\u7b24\u5e1a\u7c38\u7b95",
						"online_price": "9.90",
						"vip_online_state": "0",
						"attribute_state": "1",
						"plus_mem_status": "1",
						"plus_price": "7.90",
						"shop_mem_status": "1",
						"shop_mem_price": "8.90",
						"goods_num": 987,
						"goods_image": "http:\/\/qny.zaiyuliya.com\/Store\/Goods\/15781265065e104caac57e5.jpg",
						"maxBuyNum": 987
					},
					{
						"id": "1106",
						"goods_id": "22756",
						"promotion_status": 0,
						"act_price": null,
						"goods_img_id": "1339",
						"goods_number": "84268",
						"goods_name": "\u5f3a\u751f\u5a74\u513f\u6c90\u6d74\u9732",
						"online_price": "89.00",
						"vip_online_state": "0",
						"attribute_state": "1",
						"plus_mem_status": "1",
						"plus_price": "86.00",
						"shop_mem_status": "1",
						"shop_mem_price": "87.00",
						"goods_num": 989,
						"goods_image": "http:\/\/qny.zaiyuliya.com\/Store\/Goods\/15780326255e0eddf19519e.jpg",
						"maxBuyNum": 989
					},
					
				]
			};
		},
		methods: {
			addToCar() {
				console.log('click addToCar');
			},
			details() {
				console.log('details');
			},
			scrolltolower(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="less">
	/* #ifdef H5 */
	.home-nomoral-title-box {
		display: flex;
		align-items: center;
		padding: 0 15px;
		justify-content: space-between;
		margin-bottom: 8px;
	}
	
	.home-nomoral-title {
		font-size: 14px;
		color: #333;
		line-height: 20px;
	}
	
	.home-nomoral-more {
		display: flex;
		align-items: center;
	
		.icons {
			display: flex;
		}
	}
	
	.home-nomoral-more>text {
		font-size: 11px;
		color: #999;
		line-height: 11px;
	}
	
	.home-nomoral-list-name {
		font-size: 12px;
		color: #333;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 29px;
	}
	
	.home-recommend {
		margin-top: 11px;
	}
	
	.home-recommend-list-box {
		margin: 10px 15px 25px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.home-recommend-tips {
		color: #999;
		font-size: 12px;
		line-height: 14px;
		margin-left: 15px;
	}
	
	.home-recommend-list {
		width: 110px;
		height: 160px;
		margin-bottom: 12.5px;
		position: relative;
		vertical-align: top;
		background-color: #fff;
		border-radius: 5px;
		overflow: hidden;
	}
	
	.home-recommend-list-img {
		width: 100%;
		height: 110px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		overflow: hidden;
	}
	
	.home-recommend-list-img>image {
		width: 100%;
		height: 100%;
	}
	
	.home-recommend-list-btn {
		width: 35px;
		height: 35px;
		position: absolute;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.home-recommend-price {
		padding: 0 10px;
		box-sizing: border-box;
		font-size: 13px;
		color: #ff3d3d;
		line-height: 13px;
	}
	
	.home-recommend-padding {
		padding: 0 10px;
		box-sizing: border-box;
	}
	
	.loading {
		margin: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.loading>image {
		width: 20px;
		height: 20px;
	}
	
	.loading>text {
		font-size: 12px;
		color: #999;
		margin-left: 10px;
	}
	/* #endif */
	
	
	/* #ifndef H5 */
	.home-nomoral-title-box {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}
	
	.home-nomoral-title {
		font-size: 28rpx;
		color: #333;
		line-height: 40rpx;
	}
	
	.home-nomoral-more {
		display: flex;
		align-items: center;
	
		.icons {
			display: flex;
		}
	}
	
	.home-nomoral-more>text {
		font-size: 22rpx;
		color: #999;
		line-height: 22rpx;
	}
	
	.home-nomoral-list-name {
		font-size: 24rpx;
		color: #333;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 58rpx;
	}
	
	.home-recommend {
		margin-top: 22rpx;
	}
	
	.home-recommend-list-box {
		padding: 20rpx 30rpx 50rpx;
	}
	
	.home-recommend-tips {
		color: #999;
		font-size: 24rpx;
		line-height: 28rpx;
		margin-left: 30rpx;
	}
	
	.home-recommend-list {
		width: 220rpx;
		height: 320rpx;
		margin-bottom: 25rpx;
		position: relative;
		display: inline-block;
		vertical-align: top;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
	}
	
	.home-recommend-list-box>.home-recommend-list:nth-child(3n-1) {
		margin-left: calc(50vw - 360rpx);
		margin-right: calc(50vw - 360rpx);
	}
	
	.home-recommend-list-img {
		width: 100%;
		height: 220rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		overflow: hidden;
	}
	
	.home-recommend-list-img>image {
		width: 100%;
		height: 100%;
	}
	
	.home-recommend-list-btn {
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.home-recommend-price {
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		color: #ff3d3d;
		line-height: 26rpx;
	}
	
	.home-recommend-padding {
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	
	.loading {
		margin: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.loading>image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.loading>text {
		font-size: 24rpx;
		color: #999;
		margin-left: 20rpx;
	}
	/* #endif */
</style>
